<template>
  <div class="project-task-label" v-if="isShowLabel">
    <span class="delay-label task-delay" v-if="isShowTaskDelay">{{ i18n.t('projectManage.projectType.taskExtension') }}</span>
    <span class="delay-label project-delay" v-if="isShowProjectDelay">{{ i18n.t('projectManage.projectType.projectExtension') }}</span>
  </div>
</template>
<script>
import { defineComponent, computed } from 'vue'
import i18n from '@src/locales';
import { getRootWindow } from '@src/util/dom';

export default defineComponent({
  name: 'ProjectTaskLabel',
  props: {
    currentRowData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    
    // 是否显示项目延期
    const isShowProjectDelay = computed(() => {
      return Boolean(props.currentRowData?.isProjectDelay) || false
    })

    // 是否显示任务延期
    const isShowTaskDelay = computed(() => {
      return Boolean(props.currentRowData?.isTaskDelay) || false
    })

    // 标签灰度
    const labelGray = computed(() => {
      const RootWindow = getRootWindow(window)
      return RootWindow.grayAuth?.PROJECT_DELAY || false
    })

    const isShowLabel = computed(() => {
      return labelGray.value && (isShowProjectDelay.value || isShowTaskDelay.value);
    })

    return {
      isShowProjectDelay,
      isShowTaskDelay,
      labelGray,
      isShowLabel,
      i18n
    }
  },
})
</script>
<style lang="scss" scoped>
.delay-label {
  padding: 2px 12px;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff;
  border-radius: 11px;
}
.task-delay {
  background-color: #FAAD14;
}
.project-delay {
  background-color: #f56c6c;
}
</style>